<template>
  <div>
    <div class="ccui-app-container">
      <div class="ccui-advanced-search-wrapper ccui-clearfix">
        <el-search
          :formProp="formData"
          @search="searchItem"
          :isShowSearch="isShowSearch"
          class="ccui-highsearch no-print"
          :selectClear="true"
          width="340px"
          :spoNum="3"
        >
          <div class="ccui-tab-wrapper">
            <el-button type="table-top" size="mini" @click="tabChange(0)">
              到货验收
            </el-button>
            <el-button type="table-top" size="mini" @click="tabChange(1)">
              按发货单验收
            </el-button>
            <el-button type="table-top" size="mini" @click="tabChange(2)">
              按订单验收
            </el-button>
            <el-button
              type="table-top-active"
              size="mini"
              @click="tabChange(3)"
            >
              按合同验收（）
            </el-button>
            <el-button type="table-top" size="mini" @click="tabChange(4)">
              现场验收台账
            </el-button>
          </div>
          <div class="ccui-extend-btn" style="display: flex">
            <el-button
              size="mini"
              type="primary"
              icon="icon-ccui-add-sup"
              style="float: right"
              @click="handleAdd"
            >
              新增</el-button
            >
          </div>
          <template slot="search">
            <el-input
              v-model="formData.contractNum"
              placeholder="请输入合同编号模糊查询"
              searchLabel="合同编号"
              clearable
            ></el-input>
            <el-input
              v-model="formData.supplier"
              placeholder="请输入供应商模糊查询"
              searchLabel="供应商"
              clearable
            ></el-input>
          </template>
          <el-input
            v-model="formData.contractNum"
            placeholder="请输入合同编号模糊查询"
            slot="searchItem1"
            searchLabel="合同编号"
            clearable
          ></el-input>
          <el-input
            v-model="formData.supplier"
            placeholder="请输入供应商模糊查询"
            searchLabel="供应商"
            slot="searchItem2"
            clearable
          ></el-input>
        </el-search>
      </div>

      <!-- 表格 -->
      <div
        class="ccui-multifunctional-table-wrapper"
        style="position: relative"
      >
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :fit="true"
        >
          <el-table-column type="index" label="序号" width="50" fixed="left">
          </el-table-column>
          <el-table-column prop="o" label="合同编号" show-overflow-tooltip />
          <el-table-column show-overflow-tooltip prop="t" label="验收单编号" />
          <el-table-column
            show-overflow-tooltip
            prop="three"
            label="验收单名称"
          />
          <el-table-column show-overflow-tooltip prop="four" label="供应商" />
          <el-table-column show-overflow-tooltip prop="five" label="物资类别" />
          <el-table-column show-overflow-tooltip prop="six" label="计量单位" />
          <el-table-column
            show-overflow-tooltip
            prop="seven"
            label="填报单位"
          />
          <el-table-column
            show-overflow-tooltip
            prop="eight"
            label="合同数量"
            header-align="center"
            align="right"
          />
          <el-table-column
            show-overflow-tooltip
            prop="nine"
            label="本次验收数量"
            header-align="center"
            align="right"
          />
          <el-table-column show-overflow-tooltip label="操作" fixed="right">
            <template>
              <el-button size="mini" type="text">编辑</el-button>
              <el-button size="mini" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="table-footer">
        <div class="ccui-table-footer" style="margin-top: 20px">
          <div id="ccui-paging">
            <el-pagination
              :total="total"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              prev-text="< 上一页"
              next-text="下一页 >"
              background
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleGoPage"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowSearch: true,
      formData: {
        contractNum: "", //订单编号
        supplier: "" //供应商
      },
      tableData: [
        {
          o: "w3294034",
          t: "w344345435454354543",
          three: "西域供应链",
          four: "西域供应链",
          five: "钢筋",
          six: "吨",
          seven: "中交四航局",
          eight: 11,
          nine: 13
        }
      ],
      total: 0,
      pageSizeCode: 1,
      pageNoCode: 1,
      pagesize: 10
    };
  },
  methods: {
    searchItem() {},
    tabChange(index) {
      if (index == 2) {
        this.$router.push("/checkmanagement/manage/order-list");
      } else if (index == 3) {
        this.$router.push("/checkmanagement/manage/contract-list");
      } else if (index == 4) {
        this.$router.push("/checkmanagement/manage/ledger-list");
      }
    },
    // 新增
    handleAdd() {
      this.$router.push("/checkmanagement/manage/new-add-list");
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNoCode = val;
    },
    internalCurrentPage(val) {
      val = 10;
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {}
  },
  mounted() {}
};
</script>
